<template>
    <BasePage>
        <el-form slot="form" :inline="true" size="medium">
            <el-form-item label="项目名称">
                <el-input v-model="form.name" placeholder="请输入" clearable style="width: 160px;" />
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="form.type" clearable placeholder="请选择" style="width: 160px;">
                    <el-option v-for="item in engineeringTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="所属公路">
                <RoadSelect :value.sync="form.highwayCode" :clearable="true" style="width: 160px;"></RoadSelect>
            </el-form-item>
            <el-form-item label="锁定状态">
                <el-select v-model="form.status" clearable placeholder="请选择" style="width: 160px;">
                    <el-option v-for="item in ledgerStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c88_d427_2' }" @click="handleFilter">查询</BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c88_d427_2' }" type="second" @click="resetConditions()">重置</BaseButton>
            </el-form-item>
        </el-form>
        <BaseButton slot="button" v-permission="{ btnCode: 'dlyh_c88_d428_2' }" @click="handleAdd"> 新增养护工程 </BaseButton>
        <BaseTable slot="table" ref="table" v-loading="listLoading" :data="list" :columns="columns" highlight-current-row height="calc(100% - 73px)" @sort-change="handleSortChange">
            <template #type="{ scope: { row } }">
                    <span>{{ row.type | value2Name(engineeringTypeOptions, 'value', 'label') }}</span>
                </template>
            <template #date="{ scope: { row } }">
                <span>{{ row.startDate }} ~ {{ row.endDate }}</span>
            </template>
            <template #status="{ scope: { row } }">
                <div v-if="row.status === 1"><i class="el-icon-unlock color-yellow" style="font-size: 16px;"></i><span> 未锁定</span></div>
                <div v-if="row.status === 2"><i class="el-icon-lock color-blue" style="font-size: 16px;"></i><span> 已锁定</span></div>
            </template>
            <template #action="{ scope: { row } }">
                <BaseButton v-permission="{ btnCode: 'dlyh_c88_d429_2' }" type="text" @click="detail(row.id)"> 查看概况 </BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c88_d429_2' }" type="text" @click="detail(row.id, '3')"> 工程量清单 </BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c88_d429_2' }" type="text" @click="detail(row.id, '4')"> 计日工清单 </BaseButton>
                <BaseButton v-show="row.status === 1" v-permission="{ btnCode: 'dlyh_c88_d430_2' }" type="text" @click="handleEdit(row.id)"> 编辑 </BaseButton>
            </template>
        </BaseTable>
        <Pagination
            slot="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="page.total"
            @size-change="getList"
            @current-change="getList"
        />
    </BasePage>
</template>

<script>
import storage from 'good-storage'
import BasePage from '@/layouts/BasePage'
import { ProjectLedgerModel } from '@/models'
import useSuccess from '@/hooks/useSuccess'
import { LedgerStatusOptions, EngineeringTypeOptions } from '../../constants'
import KeepAliveHandler from '@/mixins/keepAliveHandler'
import reconfirm from '@/utils/reconfirm'

export default {
    name: 'ProjectLedgerList',
    components: {
        BasePage
    },
    mixins: [
        KeepAliveHandler({
            defaultCondition: {
                name: '',
                type: '',
                highwayCode: '',
                status: '',
                sort: 2,
                sortField: 'update_time'
            },
            conditionObjKey: 'form',
            tableRef: 'table'
        })
    ],
    data() {
        return {
            model: new ProjectLedgerModel(),
            ledgerStatusOptions: LedgerStatusOptions,
            engineeringTypeOptions: EngineeringTypeOptions,
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            listLoading: false,
            form: {
                code: '',
                contractorId: '',
                status: '',
                sort: 2,
                sortField: 'update_time'
            },
            columns: [
                {
                    attrs: {
                        label: '项目名称',
                        prop: 'name',
                        'min-width': '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'type',
                    attrs: {
                        label: '类型',
                        prop: 'type',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '所属公路',
                        prop: 'highwayName',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '施工单位',
                        prop: 'contractorName',
                        width: '180',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '工程预算（万元）',
                        prop: 'budgetAmount',
                        width: '180',
                        sortable: 'custom',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'date',
                    attrs: {
                        label: '计划工期',
                        width: '200',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'status',
                    attrs: {
                        label: '锁定状态',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        label: '更新人',
                        prop: 'operatorName',
                        width: '100',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '更新时间',
                        prop: 'updateTime',
                        sortable: 'custom',
                        width: '160'
                    }
                },
                {
                    slot: 'action',
                    attrs: {
                        label: '操作',
                        width: '310',
                        fixed: 'right'
                    }
                }
            ],
            list: [],
            contractOptions: []
        }
    },
    created () {
        this.getList()
        // 进入列表页就把详情的tabIndex缓存删掉
        storage.session.remove('tabIndex')
    },
    methods: {
        handleSortChange({ column, prop, order }) {  
            if (prop === 'budgetAmount') {
                if (order === 'ascending') {  
                    this.form.sort = 1
                } else {
                    this.form.sort = 2
                }
                
                this.form.sortField = 'budget_amount'
            }

            if (prop === 'updateTime') {
                if (order === 'ascending') {  
                    this.form.sort = 1
                } else {
                    this.form.sort = 2
                }
                
                this.form.sortField = 'update_time'
            }
            this.page.pageNo = 1
            this.getList()
        },
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        handleDelete(id) {
            reconfirm({
                isPromise: false,
                callback: () => {
                    this.model.delete({ id: id }).then((res) => {
                        useSuccess({ message: '删除成功', onlyTip: true })
                        this.getList()
                    })
                }
            })
        },
        handleAdd() {
            this.$router.push({
                name: 'ProjectLedgerAdd'
            })
        },
        detail(id, activeName) {
            storage.session.set('tabIndex', activeName)
            this.$router.push({
                name: 'ProjectLedgerDetail',
                query: {
                    id: id
                }
            })
        },
        handleEdit(id) {
            this.$router.push({
                name: 'ProjectLedgerEdit',
                query: {
                    id: id,
                    type: 'edit'
                }
            })
        },
        getList() {
            this.listLoading = true
            this.model
                .getList(this.form, this.page)
                .then((res) => {
                    this.list = res.list
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
